<template>
	<!-- 购物车一个页面-->
	<view class="">
		<!-- 导航栏 -->
		<view class="searchBar">
			<image @click="goOne" src="../../static/左键.png"></image>
			<image src="../../static/更多.png" mode=""></image>
		</view>
		<view class="">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-itme">
							<image :src="item.content" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="wenan">
			<view class="wenan-1">
				<text>￥9.9</text>
				<view class="single" v-for="(item,index) in plData">
					<view class="icon">
						<view class="icon-single" @click="getSc(index)">
							<image :src="item.scimg" mode="widthFix"></image>
							<text>{{item.scnum}}</text>
						</view>
					</view>
				</view>
			</view>
			<text>吾禾 . 日系富士山INS和风美瞳盒莫兰迪色系隐形眼睛伴侣盒小巧伴侣盒 . 落日富士山</text>
		</view>
		<view class="box">
			<view class="box-1">
				<view class="">
					<image src="../../static/对.png" mode=""></image>
					<text>品牌旗舰</text>
				</view>
				<view class="">
					<image src="../../static/对.png" mode=""></image>
					<text>包邮</text>
				</view>
				<view class="">
					<image src="../../static/对.png" mode=""></image>
					<text>7天保价</text>
				</view>
			</view>
			<image src="../../static/右键.png" mode=""></image>
		</view>
		<view class="box-2">
			<view class="box1-1">
				<text>优惠</text>
				<image src="../../static/右键.png" mode=""></image>
			</view>
			<view class="box1-1">
				<view class="">
					<text>已选</text>
					<text>落日富士山</text>
				</view>
				<image src="../../static/右键.png" mode=""></image>
			</view>
			<view class="box1-1">
				<view class="">
					<text>发货</text>
					<text>浙江金华</text>
					<text>包邮</text>
				</view>
			</view>
		</view>
		<view class="box2">
			<text>评价1</text>
			<image src="../../static/右键.png" mode=""></image>
		</view>
		<view class="box3">
			<view class="box3-1">
				<view class="">
					<image src="../../static/p.jpg" mode=""></image>
					<text>吾禾旗舰店</text>
				</view>
				<image src="../../static/右键.png" mode=""></image>
			</view>
			<view class="">
				<ul>
					<li v-for="(item,index) in punch" class="list">
						<image class="image" :src="item.url" mode="aspectFill" />
						<view class="">
							<text>{{item.content}}</text>
							<p>￥{{item.num}}</p>
						</view>
					</li>
				</ul>
			</view>
		</view>
		<view class="box4">
			<view class="">
				<text>图文详情</text>
				<p>尺寸：6.9*2.3cm</p>
				<p>图案上有一层保护膜，使用前撕下即光亮</p>
				<p>为了避免二次罐装 舍弃了瓶子 减小了体积</p>
			</view>
			<image src="../../static/c1.jpg" mode="aspectFill"></image>
			<image src="../../static/c2.jpg" mode="aspectFill"></image>
			<image src="../../static/c3.jpg" mode="aspectFill"></image>
			<image src="../../static/c4.jpg" mode="aspectFill"></image>
			<image src="../../static/c6.jpg" mode="aspectFill"></image>
			<image src="../../static/c7.jpg" mode="aspectFill"></image>
			<image src="../../static/c8.jpg" mode="aspectFill"></image>
			<view class="box4-1">
				<text>规格参数</text>
				<image src="../../static/向下.png" mode=""></image>
			</view>
			<view class="box4-1">
				<text>价格说明</text>
				<image src="../../static/向下.png" mode=""></image>
			</view>
		</view>
		<view class="box1-4">
			<text>猜你喜欢</text>
			<view class="tax" v-for="item in spData">
				<view>
					<image :src="item.spimg" mode="widthFix"></image>
					<text>{{item.spname}}</text>
					<p>￥{{item.money}}</p>
				</view>
				<view>
					<image :src="item.spimg2" mode="widthFix"></image>
					<text>{{item.spname2}}</text>
					<p>￥{{item.money2}}</p>
				</view>
			</view>
		</view>
		<view class="uni-container">
			<uni-goods-nav :fill="true" :options="options" @click="goOnes" :button-group="customButtonGroup"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	export default {
		// name:"gather",
		data() {
			return {
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				customButtonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				spData: [{
						spimg: '../../static/ww1.jpg',
						spname: '简黛 . 果酸烟酰胺沐浴露保湿香体滋润持久留香家',
						money: 28,
						spimg2: '../../static/ww2.jpg',
						spname2: '吾禾 . 日系富士山INS和风美瞳盒莫兰迪色系隐形眼',
						money2: 9.9
					},
					{
						spimg: '../../static/ww3.jpg',
						spname: '仙蒂奈儿 · 固体香膏持久留香淡香女士学生平价小',
						money: 9.9,
						spimg2: '../../static/ww4.jpg',
						spname2: '魔香 · 小苍兰洗发水控油蓬松去屑止痒洗头膏护发',
						money2: 59
					},
					{
						spimg: '../../static/ww5.jpg',
						spname: 'ROZO·少女清新持久淡香女士香水自然蜜桃香橙桂',
						money: 23.5,
						spimg2: '../../static/ww6.jpg',
						spname2: '吾禾·潮酷棋盘格黑白简约cool美瞳盒潮系男女通用',
						money2: 9.9
					},
					{
						spimg: '../../static/ww7.jpg',
						spname: '简黛·小众实验室香水沐浴露持久留香清爽补水男',
						money: 29,
						spimg2: '../../static/ww8.jpg',
						spname2: '仙蒂奈儿·雕花口红套装丝绒哑光雾面不掉色送闺',
						money2: 30.8
					},
					{
						spimg: '../../static/ww9.jpg',
						spname: '薇亦朦·茶香师香水试香',
						money: 4,
						spimg2: '../../static/ww10.jpg',
						spname2: 'NNUEDWE·正品粉饼定妆散蜜粉控油定妆持久防水',
						money2: 38
					}

				],
				punch: [{
						url: '/static/p3.jpg',
						content: '吾禾 酷酷的黑ch...',
						num: '8.8'
					},
					{
						url: '/static/p5.jpg',
						content: '吾禾 渐变美瞳盒i...',
						num: '9.9'
					},
					{
						url: '/static/p1.jpg',
						content: '吾禾 笑脸ins同款...',
						num: '8.8'
					},
					{
						url: '/static/p2.jpg',
						content: '吾禾 奶fufu日系...',
						num: '9.9'
					},
					{
						url: '/static/p4.jpg',
						content: '吾禾 虎年大吉...',
						num: '8.8'
					},
				],
				plData: [{
					scimg: "/static/星星1.png",
				}],
				info: [{
						content: '../../static/c1.jpg'
					},
					{
						content: '../../static/c2.jpg'
					},
					{
						content: '../../static/c3.jpg'
					},
					{
						content: '../../static/c4.jpg'
					},
					{
						content: '../../static/c5.jpg'
					},
					{
						content: '../../static/c6.jpg'
					},
					{
						content: '../../static/c7.jpg'
					},
					{
						content: '../../static/c8.jpg'
					},
					{
						content: '../../static/c9.jpg'
					},
					{
						content: '../../static/c10.jpg'
					}
				],
				current: 0,
				mode: 'dot',
			}
		},
		onLoad() {},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			},
			shareToggle() {
				this.$refs.share.open()
			},
			goOne() {
				uni.switchTab({
					url: "../shopping/shopping"
				})
			},
			getSc(index) {
				if (this.plData[index].scimg == "/static/星星1.png") {
					this.plData[index].scimg = "/static/星星2.png"
				} else {
					this.plData[index].scimg = "/static/星星1.png"
				}
			},
			goOnes() {
				uni.navigateTo({
					url: "../shopping-cart/shopping-cart"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "else.scss"
</style>
